<template>
	<view class="container">
		<customNavigation title="签名提交检查表" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png" color="white" background="#32A238"></customNavigation>
		<view class="sublist">
			<view class="left">
				请正楷书写：{{username}}
			</view>
			<view class="right" @tap="cleardraw">
				<image src="../../static/images/qmtj_icon_del.png" mode=""></image>清除
			</view>
		</view>
		<view class='input'>

			<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" @touchstart="canvasStart" @touchmove="canvasMove"
			 @touchend="canvasEnd" @touchcancel="canvasEnd" @error="canvasIdErrorCallback"></canvas>

			<view class='btn_arr'>
				<view class='reSign' @tap="cleardraw">
					<text class='absolute'>重签</text>
					<image class='btn_image' mode='widthFix' src=''></image>
				</view>
				<view class='confirm' @tap="saveImg">
					<text class='absolute'>提交</text>
					<image class='btn_image' mode='widthFix' src=''></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var context = null; // 使用 uni.createContext 获取绘图上下文 context
	var isButtonDown = false;
	var arrx = [];
	var arry = [];
	var arrz = [];
	var canvasw = 0;
	var canvash = 0;

	const util = require('@/utils/auto.js');
	const app = getApp()

	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth; //设备宽度
			// canvash = res.windowWidth * 7 / 15;
			canvash = res.windowHeight
		}
	});
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from "../../utils/controller.js"
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				data: {},
				type: 0,
				img: '',
				yesabsolute: false,
				list:[],
				id:"",
				sign:"",
				username:""
			};
		},
		
		methods: {
			//上传检查
			uploadCheck(){
				let value={}
				let data={}
				value.id=this.id
				value.sign=this.sign
				let TaskDetailList=[]
				this.list.forEach(item=>{
					let object={}
					object.zid=item.zid
					object.desc=item.desc
					let attrList=[]
					item.attr.forEach(item2=>{
						attrList.push(item2.ImageUrl)
					})
					object.attr=attrList.join(",")
					TaskDetailList.push(object)
				})
				value.TaskDetailList=TaskDetailList
				data.json=JSON.stringify(value)
				api.SubTaskTo(data).then(res=>{
					uni.showToast({
						icon:"none",
						title:"提交成功",
						duration:1500
					})
					setTimeout(function(){
						uni.navigateBack({
							
						})
					},1500)
				})
			},
			
			canvasIdErrorCallback(e) {
				console.error(e.detail.errMsg)
			},
			//开始
			canvasStart(event) {
				isButtonDown = true;
				arrz.push(0);
				arrx.push(event.changedTouches[0].x);
				arry.push(event.changedTouches[0].y);
				//context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
			
			},
			//过程
			canvasMove(event) {
				if (isButtonDown) {
					arrz.push(1);
					arrx.push(event.changedTouches[0].x);
					arry.push(event.changedTouches[0].y);
					// context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
					// context.stroke();
					// context.draw()
			
				};
			
				for (var i = 0; i < arrx.length; i++) {
					if (arrz[i] == 0) {
						context.moveTo(arrx[i], arry[i])
					} else {
						context.lineTo(arrx[i], arry[i])
					};
			
				};
				context.clearRect(0, 0, canvasw, canvash);
			
				context.setStrokeStyle('#000000');
				context.setLineWidth(4);
				context.setLineCap('round');
				context.setLineJoin('round');
				context.stroke();
			
				context.draw(false);
			},
			canvasEnd(event) {
				isButtonDown = false;
			},
			cleardraw() {
				//清除画布
				arrx = [];
				arry = [];
				arrz = [];
				context.clearRect(0, 0, canvasw, canvash);
				context.draw(true);
			},
			
			// 生成图片
			saveImg() {
				if (arrx.length == 0) {
					uni.showModal({
						title: '提示',
						content: '签名内容不能为空！',
						showCancel: false
					});
					return false;
				} else {
					var that = this
					uni.showModal({
						title: '是否确认签名',
						success(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '上传中',
									mask: 'true'
								})
								uni.canvasToTempFilePath({
									canvasId: 'canvas',
									success: function(res) {
										console.log(res.tempFilePath)
										uni.uploadFile({
											url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
											filePath: res.tempFilePath,
											header: {
												'Authorization': 'Bearer' + ' ' + uni.getStorageSync('token')
											},
											formData: {
											   token:uni.getStorageSync("token")             
											           },
											name: 'Data',
											// formData: {
											// 	id: that.data.id
											// },
											success(res) {
												console.log(res, '上传签名');
												uni.hideLoading()
												if (res.statusCode == 200) {
													// uni.showToast({
													// 	title: '上传成功',
													// 	icon: 'none',
													// 	image: '',
													// 	duration: 1000,
													// 	mask: false,
													// });
													that.sign=JSON.parse(res.data).ImageUrl
													that.uploadCheck()
												} else {
													uni.showToast({
														title: '上传失败',
														icon: 'none',
														duration:1500
													})
												}
											},
											fail(res) {
												uni.showToast({
													title: '上传失败',
													icon: 'none',
													duration:1500
												})
											}
										})
									}
								})
							}
						}
					})
				}
			},
			
			//导出图片
			// getimg: function () {
			//   if (arrx.length == 0) {
			//     uni.showModal({
			//       title: '提示',
			//       content: '签名内容不能为空！',
			//       showCancel: false
			//     });
			//     return false;
			//   };
			//   //生成图片
			//   uni.canvasToTempFilePath({
			//     canvasId: 'canvas',
			//     success: function (res) {
			//       console.log(res.tempFilePath);
			//       //存入服务器
			//       uni.uploadFile({
			//         url: 'a.php', //接口地址
			//         filePath: res.tempFilePath,
			//         name: 'file',
			//         formData: { //HTTP 请求中其他额外的 form data 
			//           'user': 'test'
			//         },
			//         success: function (res) {
			//           console.log(res);
			//         },
			//         fail: function (res) {
			//           console.log(res);
			//         },
			//         complete: function (res) {}
			//       });
			//     }
			//   })
			// },
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			context = uni.createCanvasContext('canvas');
			context.beginPath()
			context.setStrokeStyle('#000000');
			context.setLineWidth(4);
			context.setLineCap('round');
			context.setLineJoin('round');
			this.cleardraw();
			this.list=JSON.parse(options.list)
			this.id=options.id
			
			this.username=uni.getStorageSync("username")
		},
	}
</script>

<style>
	/* pages/quotation/quotation.uniss */
	@import "@/utils/canvas.wxss";
	page{
		background: #FAFAFA;
	}
	.sublist{
		width: 100%;
		height: auto;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.sublist .left{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2A2A2A;
	}
	.sublist .right{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB1D1D;
	}
	.sublist .right image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 13rpx;
	}
	#canvas{
		width: 686rpx;
		height: 686rpx;
		background: #FFFFFF;
	}
	.container {
		/* height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box; */
		margin-top: 11vh;
	}

	.all {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		max-width: 750rpx;
		overflow-x: hidden;
	}

	.rect {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		z-index: 110;
	}

	.bold {
		font-weight: bold;
	}

	.Eleven {
		font-size: 21rpx;
	}

	.Twelve {
		font-size: 23rpx;
	}

	.Thirteen {
		font-size: 25rpx;
	}

	.Fourteen {
		font-size: 27rpx;
	}

	.Fifteen {
		font-size: 29rpx;
	}

	.Seventeen {
		font-size: 30rpx;
	}

	.Twenty {
		font-size: 36rpx;
	}

	.Twenty-five {
		font-size: 46rpx;
	}

	.relative {
		position: relative;
	}

	.contact {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.column {
		display: flex;
		flex-direction: column;
	}

	.bottom_none {
		margin-bottom: 0rpx !important;
	}

	.white {
		color: white;
	}

	.yellow {
		color: #ffcd11;
	}

	.gray {
		color: #999;
	}

	.red {
		color: #f11;
	}

	.img {
		margin: 0 auto;
		z-index: 130;
		position: fixed;
		top: 400rpx;
		background-color: white;
		width: 690rpx;
		height: 350rpx;
	}

	page {
		background-color: #f5f5f5;
	}

	.none_dispaly {
		position: absolute;
		top: 400rpx;
	}

	.none {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 29rpx;
		letter-spacing: 5rpx;
		line-height: 45rpx;
	}

	.none image {
		width: 277rpx;
		height: 182rpx;
		margin-bottom: 52rpx;
	}

	.tel_color {
		color: #af0e0e;
		font-weight: bold;
	}

	.top {
		margin-top: 2rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		/* justify-content: space-around; */
		background-color: white;
		position: relative;
		text-align: center;
	}

	.top_item {
		width: 33%;
		display: flex;
		justify-content: center;
		font-size: 27rpx;
		position: relative;
		padding-top: 40rpx;
	}

	.top_item .num {
		position: absolute;
		width: 38rpx;
		height: 38rpx;
		line-height: 38rpx;
		border-radius: 50%;
		background-color: #f11;
		z-index: 99;
		color: white;
		right: 56rpx;
		top: 20rpx;
		font-size: 18rpx;
	}

	.top_item_pick {
		border-bottom: 4rpx solid black;
	}

	.top_item text {
		padding-bottom: 30rpx;
	}

	.number {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
		border-radius: 50%;
		background-color: #f11;
		z-index: 99;
	}

	.number text {
		color: white;
		font-size: 15rpx;
		font-weight: bold;
	}

	.number_1 {
		position: absolute;
		top: 35rpx;
		right: 335rpx;
	}

	.number_2 {
		position: absolute;
		top: 40rpx;
		right: 80rpx;
	}

	.list {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item {
		background-color: white;
		width: 630rpx;
		padding: 40rpx 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;
	}

	.del {
		display: block;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.des {
		font-size: 27rpx;
		display: flex;
		flex-direction: column;
	}

	.des text {
		margin-bottom: 20rpx;
	}

	.item_row {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.item_price {
		color: #f11;
		font-size: 32rpx;
		font-weight: bold;
	}

	.item_btnArr {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 21rpx;
	}

	.btn_detail {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 48rpx;
		background-color: white;
		border-radius: 7rpx;
		border: 1rpx solid #ccc;
		margin-right: 20rpx;
		color: #999;
	}

	.btn_sign {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.btn_sign image {
		width: 120rpx;
		height: 50rpx;
	}

	.btn_sign text {
		position: absolute;
	}

	.btn_Ysign {
		color: white;
		position: absolute;
	}

	.btn_Nsign {
		position: absolute;
		color: black;
	}

	.line {
		width: 630rpx;
		height: 2rpx;
		background-color: #eee;
		margin: 30rpx 0;
	}

	.contacts {
		display: flex;
		position: relative;
		align-items: center;
		color: #666;
		font-size: 21rpx;
		letter-spacing: 5rpx;
	}

	.human {
		width: 22rpx;
		height: 24rpx;
		margin-right: 22rpx;
	}

	.iphone {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 0rpx;
	}

	.padding_right {
		padding-right: 15rpx;
		border-right: 2rpx solid #666;
	}

	.padding_left {
		padding-left: 21rpx;
	}

	.absoluteimg {
		width: 100%;
		height: 75vh;
	}
	.confirm{
		width: 260rpx;
		height: 72rpx;
		background: #32A238;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
		position: fixed;
		bottom: 143rpx;
		left: 245rpx;
	}
</style>
